<template>
  <div class="detail">
    <div class="header-box">
      <i class="iconfont icon-fanhui icon-back" @click="back"></i>
      <span>从零开始学设计</span>
    </div>
    <div class="video-box">
      <video-player  class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      ></video-player>
    </div>
    <div class="desc-box">
      <div class="desc-nav border-bottom">
        <span @click="currentClass=0" :class="{active: currentClass==0?true:false}">详情</span>
        <span @click="currentClass=1" :class="{active: currentClass==1?true:false}">评论</span>
      </div>
      <div class="controduce">
        <div v-if="currentClass==0">
          <div class="title">
            从零开始学设计
          </div>
          <div class="desc border-bottom">
  针对0基础，想学习设计的学员针对0基础，想学习设计的学员针对0基础，想学习设计的学员
          </div>
          <div class="author">
            <div class="img-box">
              <img src="/static/aobama.png" alt="">
            </div>
            <div class="author-desc">
              <span>奥巴马</span><span style="margin-left: .5rem;">全栈工程师</span>
              <p>8年工作经验，后端资深开发。精通python，go，擅长分布式、微服务开发和爬虫应用开发。涉猎广泛，密切关注后端技术的发展。</p>
            </div>
          </div>
        </div>
      </div>
      <div class="comment"  v-if="currentClass==1">
        <div class="comment-box border-bottom">
          <div class="comment-user-avator">
            <img src="/static/avator02.jpg">
          </div>
          <div class="comment-input">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" placeholder="请留下你的评论">
          </div>
        </div>
        <span class="label">全部评论</span>
        <div class="item border-bottom">
          <div class="avator">
            <img src="/static/avator.jpg" alt="">
          </div>
          <div class="info">
            <div class="username">江小丽</div>
            <div class="comment-content">Bobby出品，必属精品。如何用Python第一大网络框架 Django 制作符合潮流的接口开发？这门课很有针对性！使用Django 最完备、使用率最高的 Django REST framework，讲解内容相当详实。另外还有良心第三方登录、支付宝支付、可浏览化API文档，sentry错误日志配置诸多好内容，惊喜。谢谢 Bobby 老师。</div>
          </div>
        </div>
        <div class="item border-bottom">
          <div class="avator">
            <img src="/static/avator.jpg" alt="">
          </div>
          <div class="info">
            <div class="username">江小白</div>
            <div class="comment-content">非常赞的课程,, 一直以来慕课网对我的帮助就很大, 之前很多前端知识就是在慕课上学到的,, 非常感谢慕课网的帮助, 也非常感谢Bobby老师出的这次Django REST framework的课程,对我现在的帮助真的是太大了,, 目前正在找python web的工作,希望听完这个课程之后,能够找到一份自己喜欢的工作, 谢谢慕课网.</div>
          </div>
        </div>
        <div class="item border-bottom">
          <div class="avator">
            <img src="/static/avator.jpg" alt="">
          </div>
          <div class="info">
            <div class="username">萌萌</div>
            <div class="comment-content">nice,赞一个nice,赞一个nice,赞一个nice,赞一个nice,赞一个nice,赞一个nice,赞一个nice,赞一个nice,赞一个nice,赞一个nice,赞一个nice,赞一个nice,赞一个nice,赞一个</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)
export default {
  name: 'ClassifyDetail',
  data () {
    return {
      // 视频播放
      currentClass: 0,
      playerOptions: {
        playbackRates: [ 0.5, 1.0, 1.5, 2.0 ], // 可选择的播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [ {
          type: '',
          src: '/static/video01.mp4'// url地址
        } ],
        poster: '', // 你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },
  methods: {
    back: function () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="stylus" scoped>
/*
播放按钮换成圆形
*/
.video-box >>> .video-js .vjs-big-play-button
    height 2em
    width 2em
    line-height 2em
    border-radius 1em
    margin-left -1em

.detail
  position relative
  padding-bottom 1.1rem
  .header-box
    height .8rem
    background-color #f5f7fa
    text-align center
    font-size .34rem
    &>span
      line-height .8rem
    .icon-back
      z-index 99
      position absolute
      top 0rem
      left 0.2rem
      color #bbb
      line-height .8rem
      transform scale(1.3)
      font-weight bold
  .desc-box
    .desc-nav
      font-size 0
      &>span
        width 50%
        display inline-block
        text-align center
        font-size .34rem
        box-sizing border-box
        padding .15rem .1rem
        transition .2s all
      .active
        color #4298e7
        font-size .35rem
    .controduce
      font-size .3rem
      padding .15rem
      .title
        padding 0.1rem 0 .15rem 0
        font-size .32rem
        font-weight bold
      .desc
        color #9199a1
        padding-bottom .2rem
      .author
        font-size 0
        margin-top .2rem
        display flex
        .img-box
          width 1.2rem
          height 1.2rem
          display inline-block
          vertical-align baseline
          &>img
            width 100%
            height 100%
            border-radius 50%
        .author-desc
          flex 1
          padding 0 .2rem
          line-height .3rem
          font-size .28rem
          display inline-block
          vertical-align baseline
          &>span
            font-size 0.32rem
          &>p:last-child
            margin-top .05rem
            color #9199a1
    .comment
      margin-top -.1rem
      padding 0 .15rem
      font-size .3rem
      .label
        font-size .32rem
        display inline-block
        padding 0.2rem 0 0.15rem 0
        font-weight bold
      .comment-box
        width 100%
        height .5rem
        display flex
        padding-bottom .3rem
        padding-top .1rem
        .comment-user-avator
          width .6rem
          height .6rem
          &>img
            width 100%
            height 100%
        .comment-input
          flex 1
          height .6rem
          margin 0 .2rem
          position relative
          &>input
            font-size .32rem
            color #bbb
            width 100%
            box-sizing border-box
            padding .05rem 0.1rem 0.05rem .6rem
            border-radius .5rem
            background-color #f5f7fa
          &>i
            display inline-block
            height .6rem
            line-height .6rem
            color #bbb
            position absolute
            top 0
            left 0.14rem
      .item
        display flex
        padding-bottom .2rem
        padding-top .2rem
        .avator
          width .6rem
          height .6rem
          &>img
            width 100%
            height 100%
            border-radius 50%
        .info
          flex 1
          padding 0 .2rem
          line-height .4rem
          box-sizing border-box
          .username
            font-size .32rem
          .comment-content
            color #bbb
</style>
